export default {
    template: `
    <div>
        <h1>dashboard 页面</h1>
        <el-row class="tac">
        <el-col :span="12" >
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo">
            <el-menu-item 
            v-if="v.children.length==0"
            :index="v.cat_id+''" :key="v.cat_id" v-for="(v,i) in menus">
            <i class="el-icon-location"></i>
              {{v.cat_name}}
            </el-menu-item>
            <el-submenu v-if="item.children.length!=0"         
            :index="item.cat_id+''" v-for="(item,index) in menus" :key="item.cat_id">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{item.cat_name}}</span>
              </template>
                <el-menu-item :index="v.cat_id+''" v-for="(v,i) in item.children" :key="v.cat_id">
                   {{v.cat_name}}
                </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col> 
        <el-col :span="12">
            <el-table
            :data="tableData"
            style="width: 100%">
                <el-table-column
                prop="ID"
                label="ID"
                width="180">
                </el-table-column>
                <el-table-column
                prop="Name"
                label="城市"
                width="180">
                </el-table-column>
                <el-table-column
                prop="Population"
                label="人口">
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="total">
            </el-pagination>
        </el-col>     
      </el-row>
    </div>
    `,
    mounted() {
        // 获取菜单
        axios.get("/menu/getmenu").then(res => {
                console.log(res.data);
                // 获取菜单数据
                // this.getMenuData(res.data.data)构造数组
                let menus = this.getMenuData(res.data.data)
                this.menus = menus

            }).catch(err => console.log(err))
            // 获取城市分页数据
        axios.get("/city", {
            params: {
                start: this.start,
                pageSize: this.pageSize
            }
        }).then(res => {
            console.log(res)
            let data = res.data
            this.total = data.total
            this.tableData = data.data
        }).catch(err => console.log(err))
    },
    data: function() {
        return {
            menus: [],
            // menus需要构造出[{name:"首页",children:[{}]}]的结构

            start: 0,
            total: 0, //总条数
            pageSize: 15, //每页的条数
            tableData: []
        }
    },
    methods: {
        // 页数发生变化
        handleCurrentChange: function(val) {
            console.log(val)
            axios.get("/city", {
                params: {
                    start: (val - 1) * this.pageSize,
                    pageSize: this.pageSize
                }
            }).then(res => {
                console.log(res)
                let data = res.data
                this.total = data.total
                this.tableData = data.data
            }).catch(err => console.log(err))
        },

        getMenuData(menus) {
            // 遍历菜单项获取顶层菜单
            let first_menus = menus.filter((v) => {
                    return v.cat_pid === 0
                })
                // console.log(first_menus)
                // 循环顶层菜单
            first_menus.map((v) => {
                    // 往顶层菜单添加children数组
                    v.children = [] //子级菜单
                        // 遍历菜单项
                    menus.map((value) => {
                        // 判断是否为子级菜单项
                        if (value.cat_pid === v.cat_id) {
                            v.children.push(value)
                        }
                    })
                })
                // console.log(first_menus)
            return first_menus
        }
    }
}